<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <!--TODO 强制将http的资源请求升级为https，之前也是通过https访问端口，是可以获取资源的，https内不可发起http,真实原因不明,暂时用这种方式解决-->
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <title>学业状况实时查询</title>
  <!--link-->
  <link rel="stylesheet" href="../../lib/bootstrap-5.1.3-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../lib/weui/weui.css">
  <link rel="stylesheet" href="../mycss.css">
  <script src="../../lib/jquery/jquery-3.6.1.js"></script>
  <script src="../../lib/axios/axios.js"></script>
  <script src="../../util/httpRequest.js"></script>
  <script src="../../lib/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
  <script src="../../lib/vue/vue.min.js"></script>
</head>
<body data-weui-theme="light">
<div class="container" id="root">
  <p class="h1 text-center">学业状况实时查询</p>
  <div class="card mb-3">
    <div class="card-header">
      必修课
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">应修学分 <span>{{required_course.required_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">已修学分 <span>{{required_course.repair_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">平均学分绩点 <span>{{required_course.average_score_point}}</span></li>
        <li class="list-group-item d-flex justify-content-between">平均成绩 <span>{{required_course.average_scores}}</span></li>
      </ul>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header">
      限选课
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">应修学分 <span>{{limited_course.required_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">已修学分 <span>{{limited_course.repair_credits}}</span></li>
      </ul>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header">
      任选课
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">应修学分 <span>{{free_course.required_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">已修学分 <span>{{free_course.repair_credits}}</span></li>
      </ul>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header">
      毕业设计（论文）
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">应修学分 <span>{{thesis.required_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">已修学分 <span>{{thesis.repair_credits}}</span></li>
      </ul>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header">
      合计
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">应修学分 <span>{{total.required_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">已修学分 <span>{{total.repair_credits}}</span></li>
        <li class="list-group-item d-flex justify-content-between">平均学分绩点 <span>{{total.average_score_point}}</span></li>
        <li class="list-group-item d-flex justify-content-between">平均成绩 <span>{{total.average_scores}}</span></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
  
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      //必修课
      required_course:{
        required_credits:'',
        repair_credits:'',
        average_score_point:'',
        average_scores:''
      },
      //限选课
      limited_course:{
        required_credits:'',
        repair_credits:''
      },
      //任选课
      free_course:{
        required_credits:'',
        repair_credits:''
      },
      //毕业论文
      thesis:{
        required_credits:'',
        repair_credits:''
      },
      total:{
        required_credits:'',
        repair_credits:'',
        average_score_point:'',
        average_scores:''
      }
    },
    methods: {},
    computed: {},
    watch: {}
  })
  http({
    url:'/third/thirdInfo/getAcademicStatus',
    method: 'get',
    //data:form
  }).then(response => {
    console.log(response)
    if (response.data.code === 200 ){
      vm.required_course = response.data.data.required_course
      vm.limited_course = response.data.data.limited_course
      vm.free_course = response.data.data.free_course
      vm.thesis = response.data.data.thesis
      vm.total = response.data.data.total
    }
  })
</script>
</body>
</html>